<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态响应接口</title>
    <script src="../../js/vue.js"></script>
    <!-- 通过使用$watch属性来实现数据的监听，$watch必须添加在Vue实例之外才能实现正确的响应 -->
</head>
<body>
  <div id="app">
    <p stype="font-size:25px;">计数器:{{counter}}</p>
    <button @click="counter++" style="font-size: 25px;">点我</button>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el:'#app',
      data:{
        counter:1
      }
    });
    vm.$watch('counter',function (nval,oval) {
      alert('计数器值的变化: ' + oval + '变成' + nval + '!');
    });
    setTimeout(
      function () {
        vm.counter += 20;
      },10000
    );

  </script>
</body>
</html>
